﻿<!DOCTYPE HTML>
<html>
<head>
	<script type="text/javascript">
		window.onload = function () {
			var chart = new CanvasJS.Chart("chartContainer", {
				title: {
					text: "Multi-Series StepLine Chart"
				},
				animationEnabled: true,
				axisY: {
					includeZero: false,
					minimum: 13,
				},
				toolTip: {
					shared: true
				},

				axisY2: {
					includeZero: false,
					minimum: 25,
				},

				data: [
				{
					type: "stepLine",
					dataPoints: [

					{ x: new Date(2008, 02), y: 15.00 },
					{ x: new Date(2008, 03), y: 14.50 },
					{ x: new Date(2008, 04), y: 14.00 },
					{ x: new Date(2008, 05), y: 14.50 },
					{ x: new Date(2008, 06), y: 14.75 },
					{ x: new Date(2008, 07), y: null },
					{ x: new Date(2008, 08), y: 15.80 },
					{ x: new Date(2008, 09), y: 17.50 }


					]
				},
			   {
			   	type: "stepLine",
			   	axisYType: "secondary",
			   	dataPoints: [

				{ x: new Date(2008, 02), y: 41.00 },
				{ x: new Date(2008, 03), y: 43.50 },
				{ x: new Date(2008, 04), y: 41.00 },
				{ x: new Date(2008, 05), y: null },
				{ x: new Date(2008, 06), y: 47.55 },
				{ x: new Date(2008, 07), y: 45.00 },
				{ x: new Date(2008, 08), y: 40.70 },
				{ x: new Date(2008, 09), y: 37.00 }
			   	]
			   }
				]
			});
			chart.render();
		}
	</script>
	<script src="../../canvasjs.min.js"></script>
	<title>CanvasJS Example</title>
</head>

<body>
	<div id="chartContainer" style="height: 400px; width: 100%;"></div>
</body>

</html>